<!--复选框-->
<template>
  <div class="example">
    <div class="example-left">
      <zz-check
        @handleChange="handleChange"
        checkTip="这是不需要其它的数据"
        :check="false"></zz-check>
      <zz-check
        @handleChange="handleChangeData"
        checkTip="这是需要其它的数据"
        :check="checkEd"
        :data="valueData"></zz-check>
    </div>
    <div class="example-right tableClass">
      <table cellspacing="0">
        <tr>
          <th>1) 调用文件组件</th>
        </tr>
        <tr>
          <td><pre>{{explameCall}}</pre></td>
        </tr>
        <tr>
          <th>2) 写入到methods方法</th>
        </tr>
        <tr>
          <td><pre>{{explameMethods}}</pre></td>
        </tr>
        <tr>
          <td><pre>{{state}}</pre></td>
        </tr>
        <tr>
          <td><pre>{{this.stateData}}{{valueData}}</pre></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        state: '',
        stateData: '',
        valueData: {id: 1},
        checkEd: true,
        explameCall: `<zz-check
          checkTip="这是文本"  需要显示的文字
          :check="true"  初始化复现框状态 默认关闭
          :data="{id: 1}" 如果除了状态 还是传其它的值 需要在data里面设置 （下有示例）
          @handleChange="handleChange" 选择后回调事件
          ></zz-check>`,

        explameMethods:
          `handleChange (state) {
            this.state = state
            console.log(this.state)
          },
          handleChangeData (data) {
            let {state, value} = data
            console.log(state, value)
          }`
      }
    },
    methods: {
      handleChange (state) {
        this.state = state
      },
      handleChangeData (data) {
        let {state, value} = data
        this.stateData = state
        this.valueData = value
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 20%;
    }
    .example-right{
      float: right;
      width: 78%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
